@import "/old/common/css/base";

* {
  box-sizing: border-box;
  outline: none;
}

@mixin linear-gradient() {
  background-image: -webkit-linear-gradient(top,
          //#72c4af 0%,
          //#dfe1b8 50%,
          //#6bb29e 100%
          #8acab2 0%,
          #dfe1b8 50%,
          #8acab2 100%
  );
  background-image: -moz-linear-gradient(top,
          #8acab2 0%,
          #dfe1b8 50%,
          #8acab2 100%
  );
  background-image: -o-linear-gradient(top,
          #8acab2 0%,
          #dfe1b8 50%,
          #8acab2 100%
  );
  background-image: -ms-linear-gradient(top,
          #8acab2 0%,
          #dfe1b8 50%,
          #8acab2 100%
  ); /* IE10+ */
  background-image: linear-gradient(top,
          #8acab2 0%,
          #dfe1b8 50%,
          #8acab2 100%
  ); /* W3C */
}

body {
  width: 100%;
  min-height: 100%;
}

img {
  width: 100%;
  border: none;
  vertical-align: middle;
  display: block;
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  @include linear-gradient();
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: 1;
  transition: opacity .3s linear;
  -webkit-transition: opacity .3s linear;
  .progress-content {
    width: 100%;
    height: 100%;
    padding-top: 55%;
    text-align: center;
    img {
      width: rem(52.5px);
      margin-left: rem(180px);
      display: block;
    }
    .progressBar {
      margin: rem(38px) auto;
      width: rem(228px);
      height: rem(11px);
      background-color: #fffcd3;
      -webkit-border-radius: rem(11px);
      -moz-border-radius: rem(11px);
      -ms-border-radius: rem(11px);
      -o-border-radius: rem(11px);
      border-radius: rem(11px);
      .bar {
        width: 0;
        height: rem(11px);
        background-color: #fff364;
        transition: width .5s linear;
        -webkit-transition: width .5s linear;
        -webkit-border-radius: rem(11px);
        -moz-border-radius: rem(11px);
        -ms-border-radius: rem(11px);
        -o-border-radius: rem(11px);
        border-radius: rem(11px);
        box-shadow: 1px 1px 2px rgba(0,0,0,0.13);
        position: relative;
        .bus{
          display: block;
          width: rem(58px);
          height: rem(26.5px);
          background: url("") no-repeat center;
          background-size: cover;
          position: absolute;
          top: rem(-26.5px);
          right: rem(-58px);
          transition: all .3s linear;
          -webkit-transition: all .3s linear;
        }
      }
    }
  }
  &.fadeOut {
    opacity: 0;
  }
}

.main {
  position: relative;
  .fixedLayer{
    position: absolute;
    top: 0;
    letf: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 500;
    .section{
      font-size: 0;
      width: rem(305px);
      height: rem(173px);
      margin: 0 auto;
      padding: rem(7.5px) 0;
      @include displayflex;
      @include flexflowRow();
      .left,.right{
        display: inline-block;
        vertical-align: middle;
        width: rem(150px);
        @include flex(1);
        .content{
          background-color: #fff;
          border: 2px solid #fd625e;
          padding: rem(2px);
          position: relative;
          .cover{
            position: absolute;
            color: #fff;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            font-size: rem(14px);
            font-weight: 700;
            text-align: center;
            line-height: rem(110px);
          }
          img{
            width: 100%;
          }
          span{
            color: #4c2a10;
            font-size: rem(12px);
            display: block;
            width: 100%;
            height: rem(17px);
            line-height: rem(19.5px);
            text-align: center;
            word-wrap: normal;
            word-break: keep-all;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .support{
          width: rem(100px);
          height: rem(25.5px);
          line-height: rem(25.5px);
          background-color:#fdc689;
          //background-color:#f05436;
          -webkit-border-radius: rem(8px);
          -moz-border-radius: rem(8px);
          -ms-border-radius: rem(8px);
          -o-border-radius: rem(8px);
          border-radius: rem(8px);
          //-webkit-box-shadow:0 4px 0 0 #c44027;
          //-moz-box-shadow:0 4px 0 0 #c44027;
          //box-shadow:0 4px 0 0 #c44027;
          -webkit-box-shadow:0 4px 0 0 #e4ab6b;
          -moz-box-shadow:0 4px 0 0 #e4ab6b;
          box-shadow:0 4px 0 0 #e4ab6b;
          color:#FFFFFF;
          font-size: rem(14px);
          margin:rem(6px) auto 0;
          text-align:center;
          &.selected{
            background-color:#f05436;
            //background-color:#fdc689;
            //-webkit-box-shadow:0 4px 0 0 #e4ab6b;
            //-moz-box-shadow:0 4px 0 0 #e4ab6b;
            //box-shadow:0 4px 0 0 #e4ab6b;
            -webkit-box-shadow:0 4px 0 0 #c44027;
            -moz-box-shadow:0 4px 0 0 #c44027;
            box-shadow:0 4px 0 0 #c44027;
          }
        }
      }
      .right{
        margin-left: rem(5px);
      }
    }
    .section.first{
      margin-top: rem(338.5px);
    }
    .section.second{
      margin-top: rem(96px);
    }
    .section.third{
      margin-top: rem(26px);
    }
    .section.fourth{
      margin-top: rem(88px);
    }
    .section.fifth{
      margin-top: rem(26px);
    }
    .footer{
      margin-top: rem(28px);
      a.submit{
        width: rem(181px);
        height: rem(61px);
        line-height: rem(80px);
        background: url(/old/images/represent/submit_bg.png) no-repeat center;
        background-size: cover;
        display: block;
        margin : 0 auto;
        font-size: rem(12px);
        color: #000;
        text-align: center;
      }
    }
  }
}
.alert-msg {
  position: fixed;
}